<!DOCTYPE html>
<!-- ID selectors -->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>ID selectors</title>

        <style type="text/css">
            div { width: 500px ;  }
            p { width: 600px ; }

            /* class selector : .class-name */
            .xyz { height: 50px ; border: 1px solid blue ; }

            /* ID selector : #element-id */
            #first { background-color: #dedede ; }
            #second { background-color: #ffff00 ; }
            #third { background-color: #FF0000 ; }
        </style>

    </head>
    <body>

        <!-- 元素的 id 属性用于指定 元素的 标识(zhi)符，它在整个页面上需要是惟一的 -->
        <!-- 作为一个优秀的前端开发人员，你一定会保证元素的 id 是惟一的 -->
        <div class="xyz" id="first"></div>

        <p class="xyz" id="second"></p>

        <div class="xyz" id="third"></div>
        
    </body>
</html>